{% extends "tutorial.html" %}
{% load mixin from templatefilters %}

{% block pagebreadcrumb %}{{ tut.title }}{% endblock %}

{% block head %}

<style>
.clip1 {
  height: 426px;
}

.clip1 > img {
  position: absolute;
  left: 40px;
  clip: rect(20px, 528px, 366px, 40px);
}

#mask-links ul {
        list-style-type: none;
        width: 240px;
        padding: 0;
} 

#mask-links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        padding: 15px 0;
        margin: 0;
}

#mask-links {
  width: 255px;
  height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-clip-path: polygon(0 0, 20px 20px, 40px 0, 60px 20px, 80px 0, 100px 20px, 120px 0, 140px 20px, 160px 0, 180px 20px, 200px 0, 220px 20px, 240px 0, 255px 0, 255px 300px, 240px 300px, 220px 280px, 200px 300px, 180px 280px, 160px 300px, 140px 280px, 120px 300px, 100px 280px, 80px 300px, 60px 280px, 40px 300px, 20px 280px, 0 300px);
  clip-path: url(#clipping4);
}

#mask-links li:nth-child(even) {
  background: #CCC
}

#mask-links li:nth-child(odd) {
  background: #AAA
}

#mask-links > ul:first-child {
  margin-top: 20px;
}

#mask-links > ul:last-child {
  margin-bottom: 20px;
}

.clip-animation {
  clip-path: url(#clipping5);
  -webkit-clip-path: polygon(100% 50%,84.70057014808336% 54.5684167277018%,91.0518476172854% 60.99980941685713%,82.33578363789503% 63.39392013277814%,93.30127018922194% 75%,77.76736691019323% 71.30665001530522%,80.05203820042827% 80.05203820042827%,71.30665001530522% 77.76736691019323%,75% 93.30127018922192%,63.39392013277814% 82.33578363789503%,60.99980941685714% 91.0518476172854%,54.56841672770181% 84.70057014808336%,50% 100%,45.4315832722982% 84.70057014808336%,39.000190583142874% 91.0518476172854%,36.606079867221865% 82.33578363789505%,25.00000000000001% 93.30127018922194%,28.693349984694787% 77.76736691019323%,19.947961799571733% 80.05203820042827%,22.23263308980677% 71.30665001530522%,6.698729810778076% 75.00000000000001%,17.664216362104966% 63.39392013277815%,8.948152382714603% 60.99980941685715%,15.299429851916635% 54.568416727701816%,0% 50.00000000000001%,15.299429851916635% 45.431583272298205%,8.94815238271459% 39.00019058314288%,17.66421636210496% 36.60607986722188%,6.698729810778062% 25.000000000000014%,22.23263308980676% 28.693349984694787%,19.947961799571715% 19.947961799571747%,28.69334998469477% 22.232633089806775%,24.99999999999998% 6.698729810778083%,36.60607986722184% 17.664216362104973%,39.00019058314284% 8.948152382714603%,45.43158327229816% 15.299429851916642%,49.99999999999999% 0%,54.568416727701795% 15.299429851916635%,60.99980941685711% 8.94815238271459%,63.39392013277812% 17.66421636210496%,74.99999999999997% 6.6987298107780475%,71.3066500153052% 22.23263308980675%,80.05203820042826% 19.947961799571722%,77.76736691019323% 28.69334998469477%,93.30127018922192% 24.99999999999998%,82.33578363789502% 36.60607986722184%,91.0518476172854% 39.00019058314283%,84.70057014808336% 45.43158327229816%);
}

.clip-animation:hover {
  -webkit-animation: "clip" 1s infinite;
}

@-webkit-keyframes "clip" {
  0% {
    -webkit-clip-path: polygon(100% 50%,84.70057014808336% 54.5684167277018%,91.0518476172854% 60.99980941685713%,82.33578363789503% 63.39392013277814%,93.30127018922194% 75%,77.76736691019323% 71.30665001530522%,80.05203820042827% 80.05203820042827%,71.30665001530522% 77.76736691019323%,75% 93.30127018922192%,63.39392013277814% 82.33578363789503%,60.99980941685714% 91.0518476172854%,54.56841672770181% 84.70057014808336%,50% 100%,45.4315832722982% 84.70057014808336%,39.000190583142874% 91.0518476172854%,36.606079867221865% 82.33578363789505%,25.00000000000001% 93.30127018922194%,28.693349984694787% 77.76736691019323%,19.947961799571733% 80.05203820042827%,22.23263308980677% 71.30665001530522%,6.698729810778076% 75.00000000000001%,17.664216362104966% 63.39392013277815%,8.948152382714603% 60.99980941685715%,15.299429851916635% 54.568416727701816%,0% 50.00000000000001%,15.299429851916635% 45.431583272298205%,8.94815238271459% 39.00019058314288%,17.66421636210496% 36.60607986722188%,6.698729810778062% 25.000000000000014%,22.23263308980676% 28.693349984694787%,19.947961799571715% 19.947961799571747%,28.69334998469477% 22.232633089806775%,24.99999999999998% 6.698729810778083%,36.60607986722184% 17.664216362104973%,39.00019058314284% 8.948152382714603%,45.43158327229816% 15.299429851916642%,49.99999999999999% 0%,54.568416727701795% 15.299429851916635%,60.99980941685711% 8.94815238271459%,63.39392013277812% 17.66421636210496%,74.99999999999997% 6.6987298107780475%,71.3066500153052% 22.23263308980675%,80.05203820042826% 19.947961799571722%,77.76736691019323% 28.69334998469477%,93.30127018922192% 24.99999999999998%,82.33578363789502% 36.60607986722184%,91.0518476172854% 39.00019058314283%,84.70057014808336% 45.43158327229816%);
  }
  50% {
    -webkit-clip-path: polygon(84.70057014808336% 54.5684167277018%,91.0518476172854% 60.99980941685713%,82.33578363789503% 63.39392013277814%,93.30127018922194% 75%,77.76736691019323% 71.30665001530522%,80.05203820042827% 80.05203820042827%,71.30665001530522% 77.76736691019323%,75% 93.30127018922192%,63.39392013277814% 82.33578363789503%,60.99980941685714% 91.0518476172854%,54.56841672770181% 84.70057014808336%,50% 100%,45.4315832722982% 84.70057014808336%,39.000190583142874% 91.0518476172854%,36.606079867221865% 82.33578363789505%,25.00000000000001% 93.30127018922194%,28.693349984694787% 77.76736691019323%,19.947961799571733% 80.05203820042827%,22.23263308980677% 71.30665001530522%,6.698729810778076% 75.00000000000001%,17.664216362104966% 63.39392013277815%,8.948152382714603% 60.99980941685715%,15.299429851916635% 54.568416727701816%,0% 50.00000000000001%,15.299429851916635% 45.431583272298205%,8.94815238271459% 39.00019058314288%,17.66421636210496% 36.60607986722188%,6.698729810778062% 25.000000000000014%,22.23263308980676% 28.693349984694787%,19.947961799571715% 19.947961799571747%,28.69334998469477% 22.232633089806775%,24.99999999999998% 6.698729810778083%,36.60607986722184% 17.664216362104973%,39.00019058314284% 8.948152382714603%,45.43158327229816% 15.299429851916642%,49.99999999999999% 0%,54.568416727701795% 15.299429851916635%,60.99980941685711% 8.94815238271459%,63.39392013277812% 17.66421636210496%,74.99999999999997% 6.6987298107780475%,71.3066500153052% 22.23263308980675%,80.05203820042826% 19.947961799571722%,77.76736691019323% 28.69334998469477%,93.30127018922192% 24.99999999999998%,82.33578363789502% 36.60607986722184%,91.0518476172854% 39.00019058314283%,84.70057014808336% 45.43158327229816%,100% 50%);
  }
  100% {
    -webkit-clip-path: polygon(91.0518476172854% 60.99980941685713%,82.33578363789503% 63.39392013277814%,93.30127018922194% 75%,77.76736691019323% 71.30665001530522%,80.05203820042827% 80.05203820042827%,71.30665001530522% 77.76736691019323%,75% 93.30127018922192%,63.39392013277814% 82.33578363789503%,60.99980941685714% 91.0518476172854%,54.56841672770181% 84.70057014808336%,50% 100%,45.4315832722982% 84.70057014808336%,39.000190583142874% 91.0518476172854%,36.606079867221865% 82.33578363789505%,25.00000000000001% 93.30127018922194%,28.693349984694787% 77.76736691019323%,19.947961799571733% 80.05203820042827%,22.23263308980677% 71.30665001530522%,6.698729810778076% 75.00000000000001%,17.664216362104966% 63.39392013277815%,8.948152382714603% 60.99980941685715%,15.299429851916635% 54.568416727701816%,0% 50.00000000000001%,15.299429851916635% 45.431583272298205%,8.94815238271459% 39.00019058314288%,17.66421636210496% 36.60607986722188%,6.698729810778062% 25.000000000000014%,22.23263308980676% 28.693349984694787%,19.947961799571715% 19.947961799571747%,28.69334998469477% 22.232633089806775%,24.99999999999998% 6.698729810778083%,36.60607986722184% 17.664216362104973%,39.00019058314284% 8.948152382714603%,45.43158327229816% 15.299429851916642%,49.99999999999999% 0%,54.568416727701795% 15.299429851916635%,60.99980941685711% 8.94815238271459%,63.39392013277812% 17.66421636210496%,74.99999999999997% 6.6987298107780475%,71.3066500153052% 22.23263308980675%,80.05203820042826% 19.947961799571722%,77.76736691019323% 28.69334998469477%,93.30127018922192% 24.99999999999998%,82.33578363789502% 36.60607986722184%,91.0518476172854% 39.00019058314283%,84.70057014808336% 45.43158327229816%,100% 50%,84.70057014808336% 54.5684167277018%);
  }
}
</style>

{% endblock %}

{% block html5badge %}
<img src="/static/images/identity/html5-badge-h-css3-graphics.png" width="165" height="64" alt="This article is powered by HTML5 CSS3 / Styling, and Graphics Effects" title="This article is powered by HTML5 CSS3 / Styling, and Graphics Effects" />
{% endblock %}

{% block content %}

<p>Two commonly used operations in computer graphics are clipping and masking. Both operations hide visual portions of an element. If you have worked with <a href="http://www.w3.org/TR/SVG/masking.html">SVG</a> or <a href="http://www.w3.org/TR/2dcontext/">HTML Canvas</a> before, these operations are probably not new for you. Clipping defines the region of an element that is visible. Everything around this region does not get rendered - it gets "clipped". On masking, a mask image is composited with the element, affecting the alpha channel of this element. Portions of a masked element get fully or partially transparent. The new <a href="http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html">CSS Masking</a> specification aims to bring these two operations to the HTML world.</p>

<h2 id="toc-clipping-in-css-21">Clipping in CSS 2.1</h2>

<p><a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/visufx.html#clipping">CSS 2.1</a> already specified the <code>clip</code> property. This property is limited to rectangular clipping with the <code>rect()</code> function taking four distance arguments for the top, right, bottom and left edges. The annoying part: The <code>clip</code> property applies to absolutely positioned elements exclusively. The property is just ignored on other elements.</p>

<p>CSS:</p>

<pre class="prettyprint"><code>img {
  position: absolute;
  clip: rect(10px, 290px, 190px, 10px);
}
</code></pre>

<p>HTML:</p>

<pre class="prettyprint"><code>&lt;img src="image.jpg" width="568"&gt;
</code></pre>

<p>
  <figure>
    <img src="clip1a.png" alt="original unclipped image" />
    <div class="clip1"><img src="clip1a.png" alt="'clip' property applied to an image" /></div>
  </figure>
</p>

<p>The <code>clip</code> property is limited to specific elements in SVG as well. This is one reason why the SVG specification added the <code>clip-path</code> property that is adapted by CSS Masking now.</p>

<h2 id="toc-clip-path-property">The clip-path property</h2>

<p>The <code>clip-path</code> property can be applied to all HTML elements, SVG graphic elements and SVG container elements. It either references a <code>&lt;clipPath&gt;</code> element or one of the basic shapes introduced with <a href="http://dev.w3.org/csswg/css3-exclusions">CSS Exclusions</a>.</p>

<p>The <code>&lt;clipPath&gt;</code> element takes any graphical element from SVG and uses them as clipping region. Graphical elements in SVG are <code>&lt;rect&gt;</code>, <code>&lt;circle&gt;</code>, <code>&lt;ellipse&gt;</code>, <code>&lt;path&gt;</code>, <code>&lt;polygon&gt;</code>, <code>&lt;image&gt;</code> and <code>&lt;text&gt;</code>. <code>&lt;clipPath&gt;</code> allows combining multiple graphical elements as well. The union of all shapes is then used as clipping region. The following example demonstrates the use of <code>&lt;clipPath&gt;</code>:</p>

<p>CSS:</p>

<pre class="prettyprint"><code>img {
  clip-path: url(#clipping);
}
</code></pre>

<p>HTML:</p>

<pre class="prettyprint"><code>&lt;svg&gt;
  &lt;defs&gt;
    &lt;clipPath id="clipping"&gt;
      &lt;circle cx="284" cy="213" r="213" /&gt;
    &lt;/clipPath&gt;
  &lt;/defs&gt;
&lt;/svg&gt;

&lt;img src="image.jpg" width="568"&gt;
</code></pre>

<p>Basic shapes on the other hand do not require any SVG markup. They were added to <code>clip-path</code> to provide easy shorthand functions for simple clipping operations.</p>

<ul>
<li><code>inset(&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt; [ round &lt;border-radius&gt; ]?)</code> defines a rectangle, similar to the <code>rect()</code> function of <code>clip</code>. The paramters describe the offsets from the top, right, bottom and left side. The function also has optional radius parameters with the syntax of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">border-radius</a> property for <a href="http://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt">rounded rects</a>.</li>
<li><code>circle(&lt;r&gt;? [ at &lt;position&gt; ]?)</code> defines a simple circle with an optional radius parameter. In addition, the optional position parameter described the center point of the circle. <code>&lt;position&gt;</code> has the same syntax as the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-position">background-position</a> property.</li>
<li><code>ellipse(&lt;rx&gt; &lt;ry&gt;? [ at &lt;position&gt; ]?)</code> defines an ellipse with a horizontal and an optional vertical radius as well as a center point based on the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-position">background-position</a> property's syntax.</li>
<li><code>polygon(&lt;x1&gt; &lt;y1&gt;, &lt;x2&gt; &lt;y2&gt;, ..., &lt;xn&gt; &lt;yn&gt;)</code> defines a polygon based on the point list parameters.</li>
</ul>

<p>Keywords like <code>content-box</code>, <code>border-box</code>, <code>margin-box</code> can be used in combination with basic shapes to position and size the specified clipping path. Defined without basic shapes, keywords act as a clipping path themselfes taking the <code>border-radius</code> property into account.</p>

<p>The CSS markup can look like the following example:</p>

<pre class="prettyprint"><code>img {
  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
}
</code></pre>

<p>Clipping can be very useful for the presentation of visual content. The following examples apply different clipping operations to images.</p>

<p><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 800 1750">
  <image xlink:href="humayun-thom-arno.jpg" width="568" height="426" clip-path="url(#clip1)" transform="translate(50, 5)"/>
  <image xlink:href="humayun-thom-arno.jpg" width="568" height="426" clip-path="url(#clip2)" transform="translate(50, 436)"/>
  <image xlink:href="humayun-thom-arno.jpg" width="568" height="426" clip-path="url(#clip3)" transform="translate(50, 867)"/>
  <image xlink:href="humayun-thom-arno.jpg" width="568" height="426" clip-path="url(#clip4)" transform="translate(50, 1298)"/>
</svg></p>

<p>But clipping can be useful for UI design as well. In the following example a chevron indicates a continuing list.</p>

<div id="mask-links">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<ul>
</div>

<p>Scroll the list to see the effect.</p>

<p>Note that <code>clip-path</code> (as well as <code>clip</code>) clips out any aspect of an element including backgrounds, borders and any scrolling mechanism.</p>

<h2 id="toc-animation-of-clip-path">Animation of clip-path</h2>

<p>Both, basic shapes and the content of a <code>&lt;mask&gt;</code> element can be animated. The following example has a star shape animation:</p>

<p><img src="humayun-thom-arno.jpg" alt="Animation of clipping" class="clip-animation"/></p>

<p>Here is the source code for the animation of the basic shape:</p>

<pre class="prettyprint"><code>img:hover {
  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  animate: star 3s;
}

@keyframes star {
  0% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  },
  100% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  }
}
</code></pre>

<h2 id="toc-masking">Masking</h2>

<p>The second operation after clipping is masking. A mask image is used as some kind of "color mesh", to filter the visual portions of an element. In the following paragraphs I'll explain the difference between two kind of masks: the luminance mask and the alpha mask.</p>

<h3 id="toc-luminance-mask">Luminance Mask</h3>

<p>For luminance masks, the mask image is transformed to a rasterized gray scale image first (if it isn't in gray scale already). The "lighter" a portion of the mask image is, the more of the masked element will be visible on the same position. For instance black indicates fully transparent, white indicates fully opaque and a gray tone indicates partial transparency of the element.</p>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="578" height="213">
  <image x="5" y="0" xlink:href="humayun-thom-arno.jpg" width="284" height="213"/>
  <rect x="295" y="1" width="282" height="211" fill="black" stroke="black"/>
  <ellipse cx="441" cy="101.5" rx="113.6" ry="85.2" fill="white" filter="url(#filter2)"/>
</svg>

<h3 id="toc-alpha-mask">Alpha Mask</h3>

<p>Alpha masking uses the same principle as luminance masking. The difference to luminance masking: just the alpha channel of the image matters. The less opaque a portion of the mask image is, the less visible the element will be at the same position.</p>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="578" height="213">
  <image x="5" y="0" xlink:href="humayun-thom-arno.jpg" width="284" height="213"/>
  <rect x="295" y="1" width="282" height="211" fill="none" stroke="black"/>
  <ellipse cx="441" cy="101.5" rx="113.6" ry="85.2" fill="black" filter="url(#filter2)"/>
</svg>

<p>To summarize: both masking types affect the transparency level of the element. The image below is the result of both masking operations above.</p>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="568" height="426">
    <mask id="mask1">
      <ellipse cx="50%" cy="50%" rx="40%" ry="40%" fill="white" filter="url(#filter2)"/>
    </mask>
  <image xlink:href="humayun-thom-arno.jpg" width="568" height="426" mask="url(#mask1)"/>
</svg>

<p>The CSS Masking specification defines two shorthand properties for masking: <code>mask</code> and <code>mask-border</code>. </p>

<h2 id="toc-the-mask-property">The mask property</h2>

<p>The <code>mask</code> property combines image masking with referencing a mask as follows.</p>

<p>The first way is the use of the <code>mask-image</code>, <code>mask-repeat</code>, <code>mask-position</code>, <code>mask-clip</code>, <code>mask-origin</code> and <code>mask-size</code> properties that are specified similar to their counter part <code>background</code> with <code>background-image</code>. Like for <code>background-image</code>, it is possible to define multiple mask sources. Each mask source is an image defined by <a href="http://www.w3.org/TR/css3-images/">CSS3 Images</a>. All mask sources will be combined to form a single mask image. This mask image is used to mask the element and its content as described above. Possible image values are any rasterized image format like JPG or PNG, SVG graphics, or predefined image values like CSS gradients.</p>

<p>The first masking example above can simply be realized with the following code:</p>

<pre class="prettyprint"><code>img {
  mask-image: url(mask.svg);
}
</code></pre>

<p>If the mask source should be stretched to the size of the content, just use the shorthand property <code>mask</code>, as you would do it for the background with the shorthand property <code>background</code>:</p>

<pre class="prettyprint"><code>img {
  mask: url(mask.svg) top left / cover;
}
</code></pre>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="578" height="213">
  <image x="5" y="0" xlink:href="humayun-thom-arno.jpg" width="284" height="213"/>
  <rect x="368" y="50" width="142" height="106.5" fill="none" stroke="black"/>
  <ellipse cx="441" cy="101.5" rx="56.8" ry="42.6" fill="black" filter="url(#filter2)"/>
</svg>

<p>The second way references a <code>&lt;mask&gt;</code> element as defined by <a href="http://www.w3.org/TR/SVG/masking.html">SVG 1.1</a>. A <code>&lt;mask&gt;</code> element takes any graphical element as well as grouping elements from SVG and uses them to create the mask image.</p>

<p>CSS:</p>

<pre class="prettyprint"><code>img {
  mask: url(#masking);
}
</code></pre>

<p>HTML:</p>

<pre class="prettyprint"><code>&lt;svg&gt;
  &lt;defs&gt;
    &lt;linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%"&gt;
      &lt;stop stop-color="black" offset="0"/&gt;
      &lt;stop stop-color="white" offset="1"/&gt;
    &lt;/linearGradient&gt;

    &lt;mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"&gt;
      &lt;rect y="0.3" width="1" height=".7" fill="url(#gradient)" /&gt;
      &lt;circle cx=".5" cy=".5" r=".35" fill="white" /&gt;
    &lt;/mask&gt;
  &lt;/defs&gt;
&lt;/svg&gt;

&lt;img src="image.jpg" width="568"&gt;
</code></pre>

<p>Which would look like the following image:</p>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="568" height="426">
  <image xlink:href="humayun-thom-arno.jpg" width="500" height="350" mask="url(#masking2)"/>
</svg>

<h2 id="toc-the-mask-border-property">The mask-border property</h2>

<p>The <code>mask-border</code> property allows to divide a mask image into 9 tiles: four corners, four edges and the middle piece. These pieces may be sliced, scaled and stretched in various ways to fit the size of the mask image area. The property borrows the functionality from <code>border-image</code> and allows powerful masking at the edges and corners of the content. The following example demonstrates the behavior of the property:</p>

<pre class="prettyprint"><code>img {
  -webkit-mask-box-image: url("stamp.svg") 35 repeat;
  mask-border: url("stamp.svg") 35 repeat;
}
</code></pre>

<p>The following image is used as mask image and divided into 9 parts:</p>

<p><img src="stampTiles.svg" alt="Pattern of a stamp to be used as mask" /></p>

<p>These parts are now used to mask the corner and edges of the content and result in the following view:</p>

<p><img src="humayun-thom-arno.jpg" style="-webkit-mask-box-image: url(stampTiles.svg) 35 repeat;" alt="Image masked with mask-border" /></p>

<h2 id="toc-browser-support">Browser support</h2>

<p>The interesting part is the support in browsers. When it comes to feature detection it gets kind of hairy.</p>

<p>All browsers support <code>clip</code> as specified. All browsers support the <code>mask</code> and the <code>clip-path</code> properties as specified in <a href="http://www.w3.org/TR/SVG/masking.html">SVG 1.1</a> on SVG elements. But just one browser lets you apply the properties on HTML elements: Firefox (sort of). Lets get into more details.</p>

<p>The <code>clip-path</code> and the <code>mask</code> property with references to <code>&lt;clipPath&gt;</code> and <code>&lt;mask&gt;</code> elements work in Firefox out of the box; both properties are unprefixed. On the other hand, <code>mask-image</code>, <code>mask-border</code> and related properties are not supported at all. Basic shapes for clipping aren't supported either.</p>

<p>Blink and WebKit based browsers, like Chrome and Safari, have support for <code>mask-image</code>, <code>mask-border</code> (currently called <code>-webkit-mask-box-image</code> in both implementations) and related properties. All of them are prefixed and can just be applied to HTML elements. The nightly builds of both browsers already support the prefixed <code>-webkit-clip-path</code> property with basic shapes and referencing <code>&lt;clipPath&gt;</code> elements on HTML. WebKit supports the additional box-sizing keywords.</p>

<p>If you want to try clipping and masking, make sure that you use the prefixed and unprefixed properties. The unprefixed properties must use reference of <code>&lt;mask&gt;</code> or <code>&lt;clipPath&gt;</code> at the moment.</p>

<pre class="prettyprint"><code>&lt;style&gt;
  #image {
    mask: url(#mask);
    -webkit-mask: url(mask.svg) top left / cover;
  }
&lt;/style&gt;

&lt;img id="image" src="coolImage.jpg" width="400"&gt;

&lt;svg width="0" height="0"&gt;
  &lt;mask id="mask"&gt;
    ...
  &lt;/mask&gt;
&lt;/svg&gt;
</code></pre>

<p>But be careful, other browsers don't have further masking or clipping functionalities for HTML elements yet.</p>

<h2 id="toc-acknowledgment">Acknowledgment</h2>

<p>Thank you very much to Arno Gourdol for providing the picture from the <a href="http://en.wikipedia.org/wiki/Humayun's_Tomb">Humayun's Tomb</a>.</p>
<svg width="0" height="0">
  <defs>
    <clipPath id="clip1">
        <path
       d="M 0 207.918 L 146.463 206.956 L 146.967 141.224 L 150.742 141.056 L 150.574 149.037 L 158.387 146.659 L 158.098 136.73 L 161.464 136.609 L 161.705 146.659 L 172.668 146.538 L 172.668 131.921 L 176.995 132.209 L 176.659 146.659 L 184.088 147.068 L 183.968 141.729 L 180.434 137.402 L 185.459 134.661 L 188.872 128.145 L 200.076 120.501 L 211.302 126.439 L 216.615 140.216 L 213.323 141.513 L 213.323 146.538 L 225.657 146.081 L 225.2 137.402 L 227.41 137.113 L 228.277 147.982 L 232.052 149.279 L 231.595 141.513 L 230.681 137.402 L 230.681 124.155 L 235.249 112.735 L 244.385 100.858 L 256.719 91.2658 L 269.966 85.3274 L 275.904 83.5003 L 273.163 78.4755 L 274.702 72.7999 L 276.865 63.2333 L 279.558 70.71 L 279.485 75.6614 L 280.015 84.4873 L 292.806 88.9818 L 304.346 96.6266 L 312.327 103.983 L 319.804 113.817 L 323.868 128.266 L 325.238 137.402 L 322.954 141.513 L 322.954 146.538 L 326.152 145.168 L 326.152 135.118 L 330.263 134.661 L 329.806 146.538 L 342.596 146.538 L 342.596 141.056 L 335.744 140.143 L 341.683 130.55 L 346.251 123.241 L 354.93 117.76 L 364.979 125.069 L 367.72 134.204 L 374.572 136.488 L 371.831 141.97 L 373.201 145.624 L 378.226 145.624 L 378.226 139.229 L 375.942 135.118 L 380.053 130.093 L 381.881 136.488 L 381.881 145.624 L 392.387 146.081 L 392.387 140.6 L 394.671 135.575 L 396.498 141.97 L 396.041 146.995 L 404.095 149.494 L 403.35 139.639 L 406.642 139.35 L 407.004 205.921 L 434.412 205.921 L 437.609 192.217 L 446.745 193.588 L 449.029 204.094 L 567.555 205.008 L 567.796 425.491 L 0.288769 425.659 Z"/>
    </clipPath>
    <clipPath id="clip2">
       <path
       d="M 14.8492 10.0868 L 80.6102 35.5426 L 125.865 6.55125 L 152.028 36.9568 L 199.404 8.67257 L 255.973 41.9066 L 305.47 3.72283 L 362.039 36.2497 L 386.787 8.67257 L 454.67 44.0279 L 477.297 9.37968 L 502.753 27.7645 L 555.079 7.96547 L 565.685 32.0071 L 530.33 98.4751 L 567.1 153.629 L 523.259 190.399 L 563.564 254.039 L 528.916 280.909 L 567.1 352.326 L 543.058 418.087 L 501.339 388.389 L 441.235 423.037 L 414.365 391.217 L 325.976 420.916 L 272.236 393.339 L 248.902 420.916 L 178.898 389.803 L 108.894 420.209 L 65.7609 392.632 L 35.3553 420.916 L 0.707107 391.217 L 24.7487 318.385 L 2.82843 266.767 L 29.6985 245.553 L 1.41421 191.813 L 29.6985 123.224 L 3.53553 82.2117 L 26.8701 46.8563 Z"/>
    </clipPath>
    <clipPath id="clip3">
       <rect width="568" height="426" rx="85.2" ry="85.2"/>
    </clipPath>
    <clipPath id="clip4">
        <ellipse cx="284" cy="213" rx="284" ry="213"/>
    </clipPath>
    <filter id="filter2">
      <feGaussianBlur stdDeviation="10"/>
    </filter>
    <filter id="filter">
      <feGaussianBlur stdDeviation="0.03"/>
    </filter>
    <filter id="filter2">
      <feGaussianBlur stdDeviation="5"/>
    </filter>
    <linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
      <stop stop-color="black" offset="0"/>
      <stop stop-color="white" offset="1"/>
    </linearGradient>
    <mask id="masking2" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect y="0.3" width="1" height=".7" fill="url(#gradient)" />
      <circle cx=".5" cy=".5" r=".35" fill="white" />
    </mask>
    <clipPath id="clipping4">
      <polygon points="0 0, 20 20, 40 0, 60 20, 80 0, 100 20, 120 0, 140 20, 160 0, 180 20, 200 0, 220 20, 240 0, 255 0, 255 300, 240 300, 220 280, 200 300, 180 280, 160 300, 140 280, 120 300, 100 280, 80 300, 60 280, 40 300, 20 280, 0 300"/>
    </clipPath>
    <clipPath id="clipping5" clipPathUnits="objectBoundingBox">
      <polygon points="1.00 .50,.8470057014808336 .545684167277018,.910518476172854 .6099980941685713,.8233578363789503 .6339392013277814,.9330127018922194 .75,.7776736691019323 .7130665001530522,.8005203820042827 .8005203820042827,.7130665001530522 .7776736691019323,.75 .9330127018922192,.6339392013277814 .8233578363789503,.6099980941685714 .910518476172854,.5456841672770181 .8470057014808336,.50 1.00,.454315832722982 .8470057014808336,.39000190583142874 .910518476172854,.36606079867221865 .8233578363789505,.2500000000000001 .9330127018922194,.28693349984694787 .7776736691019323,.19947961799571733 .8005203820042827,.2223263308980677 .7130665001530522,.06698729810778076 .7500000000000001,.17664216362104966 .6339392013277815,.08948152382714603 .6099980941685715,.15299429851916635 .54568416727701816,0 .5000000000000001,.15299429851916635 .45431583272298205,.0894815238271459 .3900019058314288,.1766421636210496 .3660607986722188,.06698729810778062 .25000000000000014,.2223263308980676 .28693349984694787,.19947961799571715 .19947961799571747,.2869334998469477 .22232633089806775,.2499999999999998 .06698729810778083,.3660607986722184 .17664216362104973,.3900019058314284 .08948152382714603,.4543158327229816 .15299429851916642,.4999999999999999 0,.54568416727701795 .15299429851916635,.6099980941685711 .0894815238271459,.6339392013277812 .1766421636210496,.7499999999999997 .066987298107780475,.713066500153052 .2223263308980675,.8005203820042826 .19947961799571722,.7776736691019323 .2869334998469477,.9330127018922192 .2499999999999998,.8233578363789502 .3660607986722184,.910518476172854 .3900019058314283,.8470057014808336 .4543158327229816"/>
    </clipPath>
  </defs>
</svg>
{% endblock %}
